<template>
  <div>
    <!--面包屑-->
    <breadcrumb></breadcrumb>
    <!-- 卡片-->
    <el-card class="box-card">
      <el-row :gutter="20">
        <search :list="userList" @clearSearch="clearSearch" @searchData="searchData"></search>
      </el-row>
      <!-- 用户列表-->
      <el-table :data="dataList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="userName" label="昵称"></el-table-column>
        <el-table-column prop="login" label="登录"></el-table-column>
        <el-table-column prop="post" label="帖子"></el-table-column>
        <el-table-column prop="comment" label="评论"></el-table-column>
        <el-table-column prop="parise" label="点赞"></el-table-column>
        <el-table-column prop="count" label="总分"></el-table-column>
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <!--查看按钮-->
            <el-button
              type="primary"
              icon="el-icon-view"
              size="mini"
              @click="lookup(scope.row.userName)"
            ></el-button>
            <!--修改按钮-->
            <el-button type="success" icon="el-icon-edit" size="mini" @click="edit(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--积分明细对话框-->
    <el-dialog
      :title="integDialogName+'的积分明细'"
      :visible.sync="integDialog"
      width="50%"
      class="add_dialog"
    >
      <!--内容主体-->
      <el-tabs v-model="activeName" style="min-height:200px;">
        <el-tab-pane label="登录" name="login">
          <div v-for="(item,index) in integDetail.login" :key="index" class="text item">
            <el-row :gutter="10">
              <el-col :span="7" :offset="1">{{item.date}}</el-col>
              <el-col :span="11">已登录</el-col>
              <el-col :span="5" style="font-size: 12px;color:#999;">积分+1</el-col>
            </el-row>
            <el-divider></el-divider>
          </div>
        </el-tab-pane>
        <el-tab-pane label="帖子" name="post">
          <div v-for="(item,index) in integDetail.post" :key="index" class="text item">
            <el-row :gutter="10">
              <el-col :span="7" :offset="1">{{item.date}}</el-col>
              <el-col :span="11">已发帖</el-col>
              <el-col :span="5" style="font-size: 12px;color:#999;">积分+1</el-col>
            </el-row>
            <el-divider></el-divider>
          </div>
        </el-tab-pane>
        <el-tab-pane label="点赞" name="comment">
          <div v-for="(item,index) in integDetail.parise" :key="index" class="text item">
            <el-row :gutter="10">
              <el-col :span="7" :offset="1">{{item.publisher}}</el-col>
              <el-col :span="11">{{item.msg}}</el-col>
              <el-col :span="5" style="font-size: 12px;color:#999;">{{item.date}}</el-col>
            </el-row>
            <el-divider></el-divider>
          </div>
        </el-tab-pane>
        <el-tab-pane label="评论" name="parise">
          <div v-for="(item,index) in integDetail.comment" :key="index" class="text item">
            <el-row :gutter="10">
              <el-col :span="7" :offset="1">{{item.publisher}}</el-col>
              <el-col :span="11">{{item.msg}}</el-col>
              <el-col :span="5" style="font-size: 12px;color:#999;">{{item.date}}</el-col>
            </el-row>
            <el-divider></el-divider>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!--按钮-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="integDialog=false">取消</el-button>
      </span>
    </el-dialog>
    <!--修改积分对话框-->
    <el-dialog
      :title="'修改积分'+integDialogName"
      :visible.sync="editDialogVisiable"
      @open="openEdit()"
      @close="closeEdit()"
      width="50%"
      class="add_dialog"
    >
      <!--内容主体-->
      <edit :scope="scope" v-if="isShowEdit"></edit>
    </el-dialog>
  </div>
</template>
<script>
import breadcrumb from '../breadcrumb.vue'
import search from '../search.vue'
import edit from './edit.vue'
export default {
  data() {
    return {
      userList: [],
      dataList: [],
      editDialogVisiable: false, // 修改对话框
      scope: '',
      isShowEdit: false,
      activeName: 'login', // tabs 的name
      integDialog: false, // 明细对话框
      integDialogName: '', // 对话框姓名
      integDetail: {} // 积分明细
    }
  },
  created() {
    this.comm.getUserList(0).then(data => {
      data.forEach(item => {
        item.integ.count = this.comm.integSum(item.integ)
        item.integ.userName = item.userName
        this.userList.push(item.integ)
        this.dataList.push(item.integ)
      })
    })
  },
  methods: {
    searchData(data) {
      this.dataList = data
    },
    clearSearch() {
      this.dataList = this.userList
    },
    // 查看
    async lookup(scope) {
      this.integDialogName = scope
      this.integDialog = true
      // 查找积分信息
      this.comm.getnotice(scope, this).then(data => {
        this.integDetail = data
      })
    },
    // 编辑信息
    edit(scope) {
      this.scope = scope
      this.editDialogVisiable = true
    },
    openEdit() {
      this.isShowEdit = true
    },
    closeEdit() {
      this.isShowEdit = false
    }
  },
  components: {
    breadcrumb,
    search,
    edit
  }
}
</script>
<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 10px;
}
.el-table {
  margin-top: 15px;
}
.el-divider--horizontal {
  margin: 10px 0;
}
</style>
